<!DOCTYPE html>
<html>
<head>
    <title>删除项目</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 400px; margin: 0 auto; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; }
        input { padding: 8px; width: 100%; box-sizing: border-box; }
        button { padding: 10px 15px; background-color: #d9534f; color: white; border: none; cursor: pointer; }
        button:hover { background-color: #c9302c; }
        #status-message { margin-top: 20px; padding: 10px; border-radius: 4px; }
        .success { background-color: #dff0d8; color: #3c763d; }
        .error { background-color: #f2dede; color: #a94442; }
    </style>
</head>
<body>
    <div class="container">
        <h1>删除项目</h1>
        
        <form id="delete-form" method="post">
            {% csrf_token %}
            <div class="form-group">
                <label for="project-id">项目ID:</label>
                <input type="number" id="project-id" name="project_id" min="1" required>
            </div>
            <button type="submit" id="delete-btn">删除项目</button>
        </form>
        
        <div id="status-message"></div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const deleteForm = document.getElementById('delete-form');
            const projectIdInput = document.getElementById('project-id');
            const statusMessage = document.getElementById('status-message');
            const deleteBtn = document.getElementById('delete-btn');

            // 从cookie中获取CSRF令牌
            function getCSRFToken() {
                const cookieValue = document.cookie
                    .split('; ')    
                    .find(row => row.startsWith('csrftoken='))
                    ?.split('=')[1];
                return cookieValue;
            }

            // 显示状态消息
            function showStatus(message, isError = false) {
                statusMessage.textContent = message;
                statusMessage.className = isError ? 'error' : 'success';
            }

            // 直接删除项目
            function deleteProject(projectId) {
                const csrfToken = getCSRFToken();
                if (!csrfToken) {
                    showStatus('无法获取CSRF令牌，请先登录', true);
                    return;
                }

                const url = `/project/delete/${projectId}/`;
                const xhr = new XMLHttpRequest();
                xhr.open('POST', url, true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.setRequestHeader('X-CSRFToken', csrfToken);

                xhr.onload = function() {
                    if (xhr.status === 200) {
                        try {
                            const data = JSON.parse(xhr.responseText);
                            if (data.status) {
                                showStatus('项目删除成功！');
                                // 模拟项目在页面上消失
                                setTimeout(() => {
                                    window.location.href = '/project/list/';
                                }, 1000);
                            } else {
                                showStatus('删除失败: ' + data.msg, true);
                            }
                        } catch (e) {
                            showStatus('响应解析错误', true);
                        }
                    } else {
                        showStatus('请求失败，状态码: ' + xhr.status, true);
                    }
                };

                xhr.onerror = function() {
                    showStatus('请求发生错误', true);
                };

                xhr.send(`csrfmiddlewaretoken=${encodeURIComponent(csrfToken)}`);
            }

            // 表单提交事件
            deleteForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const projectId = projectIdInput.value.trim();

                if (!projectId || isNaN(projectId) || parseInt(projectId) <= 0) {
                    showStatus('请输入有效的项目ID', true);
                    return;
                }

                // 直接删除，不进行确认
                deleteProject(projectId);
            });

            // 按钮点击事件
            deleteBtn.addEventListener('click', function(e) {
                e.preventDefault();
                const projectId = projectIdInput.value.trim();

                if (!projectId || isNaN(projectId) || parseInt(projectId) <= 0) {
                    showStatus('请输入有效的项目ID', true);
                    return;
                }

                // 直接删除，不进行确认
                deleteProject(projectId);
            });
        });
    </script>
</body>
</html>